<template>
    <div class="flash-container">
        <h2 class="flash-title">限时秒杀</h2>
        
        <!-- 场次选择 -->
        <div class="session-selector">
            <el-button 
                :type="currentSession === 8 ? 'danger' : 'info'" 
                @click="changeSession(8)"
                :disabled="isSessionDisabled(8)"
            >
                早上8点场
                <div class="session-status">{{ getSessionStatus(8) }}</div>
            </el-button>
            <el-button 
                :type="currentSession === 12 ? 'danger' : 'info'" 
                @click="changeSession(12)"
                :disabled="isSessionDisabled(12)"
            >
                中午12点场
                <div class="session-status">{{ getSessionStatus(12) }}</div>
            </el-button>
        </div>
        
        <!-- 秒杀商品列表 -->
        <div class="flash-list">
            <div class="flash-item" v-for="item in flashProducts" :key="item.id">
                <img :src="item.image" :alt="item.name" class="product-image" />
                <div class="product-info">
                    <h3 class="product-name">{{ item.name }}</h3>
                    <div class="product-price">
                        <span class="flash-price">¥{{ item.flashPrice.toFixed(2) }}</span>
                        <span class="original-price">¥{{ item.originalPrice.toFixed(2) }}</span>
                    </div>
                    <div class="product-stock">剩余: {{ item.stock }}件</div>
                </div>
                <el-button 
                    type="danger" 
                    class="flash-button" 
                    :disabled="!canFlash || item.stock <= 0"
                    @click="handleFlash(item.id)"
                >
                    {{ getButtonText(item) }}
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import flashApi from '@/api/flash'

// 当前场次（8点或12点）
const currentSession = ref(8)
// 当前时间
const currentTime = ref(new Date())
// 测试数据
const flashProducts = ref([
    {
        id: 1,
        name: '秒杀商品1 - 超值套装',
        image: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
        originalPrice: 199.00,
        flashPrice: 99.00,
        stock: 10
    },
    {
        id: 2,
        name: '秒杀商品2 - 限时特惠',
        image: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
        originalPrice: 299.00,
        flashPrice: 199.00,
        stock: 5
    },
    {
        id: 3,
        name: '秒杀商品3 - 爆款推荐',
        image: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
        originalPrice: 399.00,
        flashPrice: 299.00,
        stock: 3
    },
    {
        id: 4,
        name: '秒杀商品4 - 新品上市',
        image: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
        originalPrice: 499.00,
        flashPrice: 399.00,
        stock: 8
    }
])

// 计算当前场次状态
const canFlash = computed(() => {
    const hour = currentTime.value.getHours()
    return hour === currentSession.value
})

// 更新当前时间
const updateCurrentTime = () => {
    currentTime.value = new Date()
    setTimeout(updateCurrentTime, 1000)
}

// 切换场次
const changeSession = (session: number) => {
    currentSession.value = session
    // 这里应该根据场次获取商品列表
    // fetchFlashProducts()
}

// 检查场次是否可用
const isSessionDisabled = (session: number) => {
    const hour = currentTime.value.getHours()
    return hour !== session && hour !== session + 1
}

// 获取场次状态文字
const getSessionStatus = (session: number) => {
    const hour = currentTime.value.getHours()
    if (hour === session) return '进行中'
    if (hour === session + 1) return '已结束'
    return '未开始'
}

// 获取按钮文字
const getButtonText = (item: any) => {
    if (item.stock <= 0) return '已售罄'
    if (!canFlash.value) return '未开始'
    return '立即抢购'
}

// 处理秒杀
const handleFlash = async (productId: number) => {
    try {
        // 这里应该调用秒杀接口
        // const res = await flashApi.startFlash(productId)
        
        // 模拟秒杀成功或失败
        const random = Math.random()
        if (random > 0.3) {
            ElMessage.success('秒杀成功！')
            // 减少库存
            const product = flashProducts.value.find(p => p.id === productId)
            if (product) product.stock -= 1
        } else {
            ElMessage.error('当前商品已售罄')
        }
    } catch (error) {
        console.error('秒杀失败:', error)
        ElMessage.error('秒杀失败')
    }
}

onMounted(() => {
    updateCurrentTime()
    // 这里应该根据当前时间自动选择场次
    const hour = currentTime.value.getHours()
    if (hour >= 8 && hour < 9) {
        currentSession.value = 8
    } else if (hour >= 12 && hour < 13) {
        currentSession.value = 12
    }
    // fetchFlashProducts()
})
</script>

<style scoped>
.flash-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.flash-title {
    font-size: 24px;
    margin-bottom: 20px;
    color: #f56c6c;
    text-align: center;
}

.session-selector {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.session-selector .el-button {
    width: 150px;
    height: 60px;
    font-size: 16px;
    position: relative;
}

.session-status {
    font-size: 14px;
    margin-top: 5px;
}

.flash-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.flash-item {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.product-image {
    width: 160px;
    height: 160px;
    object-fit: cover;
    margin-bottom: 15px;
}

.product-info {
    width: 100%;
    margin-bottom: 15px;
}

.product-name {
    font-size: 16px;
    margin-bottom: 10px;
    height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
     line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.flash-price {
    color: #f56c6c;
    font-size: 18px;
    font-weight: bold;
}

.original-price {
    color: #999;
    font-size: 14px;
    text-decoration: line-through;
}

.product-stock {
    color: #666;
    font-size: 12px;
    text-align: center;
}

.flash-button {
    width: 100%;
    margin-top: auto;
}
</style>